<template>
  <div>
    <!-- 剖面分析结果图 -->
    <Echart :options="options" id="total-chart" height="290px" width="500px">
    </Echart>
  </div>
</template>

<script>
import Echart from "@/common/echart";
export default {
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options={
          grid: {
            top: 10,
            left: 0,
            right: 0,
            bottom: 5,
            containLabel: !0,
          },
          tooltip: {
            trigger: 'axis',
            formatter: function(e) {
              var htmldiv='';
              return (
                htmldiv+=
                '经纬度:'+e[0].axisValue+'<br/>'+
                '高程值:'+e[0].value+'米'+'<br/>'
              )
            },
          },
          xAxis:
          {
            name: '距离',
            type: 'category',
            boundaryGap: !1,
            axisLabel: {
              show: !1,
            },
            data: newData.position,
          },

          yAxis:
          {
            type: 'value',
            axisLabel: {
              rotate: 0,
              formatter: '{value} 米',
            },
          },

          series: [
            {
              name: '高程值',
              type: 'line',
              smooth: !0,
              symbol: 'none',
              sampling: 'average',
              itemStyle: {
                normal: {
                  color: 'rgb(255, 70, 131)',
                },
              },
              areaStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0,0,0,1,[
                    {
                      offset: 0,
                      color: 'rgb(255, 158, 68)',
                    },
                    {
                      offset: 1,
                      color: 'rgb(255, 70, 131)',
                    },
                  ]),
                },
              },
              data: newData.heightData,
            },
          ],
        }
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
